<template>
    <div class="new-old-user page-container">
        <el-row class="new-old-user_row header">
            <span class="text">新老用户</span>
            <i class="el-icon-question"></i>
        </el-row>
        <el-row class="new-old-user_row new-old-user_row--filter" type="flex">
            <el-radio
                    class="filter-item"
                    v-for="{label, value} in dateOption"
                    v-model="dateRange"
                    :key="value"
                    :label="value"
                    @change="handleDateChange"
                    border>
                {{label}}
            </el-radio>
            <el-date-picker
                    v-show="showDateRangePicker"
                    class="filter-item"
                    v-model="queryParameter.dateRange"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :clearable="false"
                    :value-format="dateFormat">
            </el-date-picker>
        </el-row>
        <el-row class="new-old-user_row user-data_row--key-indicator">
            <el-card class="box-card">
                <el-row type="flex" justify="space-between" align="middle" slot="header">
                    <span class="title">关键指标</span>
                </el-row>
                <div class="card-content">
                    <el-tag type="info">用户比</el-tag>
                    <chartKeyIndicator class="chart-item" style="min-height: 340px;" />
                </div>
            </el-card>
        </el-row>
        <el-row class="new-old-user_row user-data_row--key-indicator">
            <el-card class="box-card">
                <el-row type="flex" justify="space-between" align="middle" slot="header">
                    <span class="title">详细数据</span>
                </el-row>
                <div class="card-content">
                    <TableSimple :tableData="tableData" />
                    <el-pagination
                            background
                            :current-page.sync="currentPage"
                            :page-size="100"
                            layout="prev, pager, next, jumper"
                            :total="1000">
                    </el-pagination>
                </div>

            </el-card>
        </el-row>
    </div>
</template>

<script>
import ChartKeyIndicator from './chart-key-indicator'
import { commonMixin } from '@/mixins/user-analysis'
export default {
  name: 'NewOldUser',
  components: { ChartKeyIndicator },
  mixins: [commonMixin],
  data () {
    return {
      tableData: {
        column: [
          {
            label: '时间',
            prop: 'date'
          },
          {
            label: '新用户数',
            prop: 'pv'
          },
          {
            label: '新用户数占比',
            prop: 'uv'
          },
          {
            label: '老用户数',
            prop: 'vv'
          },
          {
            label: '老用户数占比',
            prop: 'ip'
          }
        ],
        data: [
          {
            date: '2016-05-02',
            pv: '王小虎',
            uv: '王小虎',
            vv: '114',
            out: '王小虎',
            online: '王小虎',
            ip: '上海市普陀区金沙江路 1518 弄'
          },
          {
            date: '2016-05-02',
            pv: '王小虎',
            uv: '王小虎',
            vv: '114',
            out: '王小虎',
            online: '王小虎',
            ip: '上海市普陀区金沙江路 1518 弄'
          },
          {
            date: '2016-05-02',
            pv: '王小虎',
            uv: '王小虎',
            vv: '114',
            out: '王小虎',
            online: '王小虎',
            ip: '上海市普陀区金沙江路 1518 弄'
          }
        ]
      }
    }
  }
}
</script>

<style lang="scss" scoped>
    @import "~element-theme-chalk/src/common/var.scss";
    @import "@/assets/scss/modules/variables-module.scss";
    @import "@/assets/scss/modules/common-module.scss";

    .page-container {
        .header {
            font-size: 150%;
            .text {
                font-weight: bold;
            }
            .el-icon-question {
                margin-left: $gap-default;
                color: $--color-text-placeholder;
            }
        }

        .new-old-user_row {
            & ~ .new-old-user_row {
                margin-top: $gap-big;
            }

            .box-card {
                & + .box-card {
                    margin-top: 0;
                    margin-left: $gap-default;
                }

                .title {
                    font-weight: bolder;
                    font-size: 145%;
                }
                .card-content {
                    position: relative;
                }
            }
        }

        .new-old-user_row--filter {
            @include filter-row;
        }

        .user-data_row--key-indicator {
            .el-tag {
                position: absolute;
                right: 2%;
                color: $--color-text-primary;
                font-weight: bold;
            }
        }
    }
</style>
